How to add Alternating Row Colors to a List Control Using CSS Selectors

Description

Learn how to create alternating row colors for a List using an Alpha-based web theme using CSS classes instead of the Conditional Row Style List properties.

Discussion

CSS selectors can be used to easily apply alternating row colors to the a List control. The :nth-child() is a special keyword that can be combined with a selector, such as a class name, to apply a style to an element based on it's position. For example, suppose you have defined a class called "alternate" that you've assigned to the List item class name property that sets the background color and you would only like to apply this background color to every other row in the List:

.alternate {
    background-color: #f26968;
}

By adding the pseudo-class :nth-child(even) to the CSS selector, .alternate (this is a class selector), you can specify that the background color should only be applied to every other List row that has the "alternate" class.

.alternate:nth-child(even) {
    background-color: #f26968;
}

even is a special keyword used with :nth-child() that represents all elements in the selection with an even position. The "selection" is the class selector, .alternate. Since the class is applied using the List item class name List property, the selector can be interpreted as each even row in the list -- row 2, row 4, row 6, etc.

The keyword odd does the same thing as even, however the rule is applied to odd rows -- row 1, row 3, row 5, etc.

In addition to these two keywords, :nth-child() also supports a function notation, An+B where A is the interval and B is the offset from the first row, which lets you create rules to apply a repeating row color using any interval you'd like. For example, to apply the background to every third row you can use 3n:

.alternate:nth-child(3n) {
    background-color: #f26968;
}

Preserving Row Highlighting Behavior

When the user hovers a mouse over a List row, a highlighting class is applied when using the built-in Alpha Anywhere web themes. When you define a CSS class to apply an alternating row color, the background color applied by the hover class will not be applied. This is because of how CSS rules work. CSS defined in the List control is loaded after the web theme. When the styles are resolved, the locally defined classes used to apply alternating background colors will be used regardless of the background defined in the highlighting class.

One approach to preserving the row highlighting behavior provided by the web them is to use the :not() CSS pseudo-class. For example:

.alternate:not(.listItemHover):nth-child(even) {
    background-color: #f26968;
}

.alternate:not(.listItemHover):nth-child(even) is a CSS selector that reads selects every even count element with the class "alternate" that do not also have the class "listItemHover" beginning with the second element found in the layout. In other words, the background color will only be applied to every other row in the list that isn't be hovered over with the mouse cursor.

You can create a similar rule for odd rows using the :nth-child(odd) selector in place of :nth-child(even). For example:

.alternate:not(.listItemHover):nth-child(odd) {
    background-color: #f26968;
}

To learn more about the selectors, check out CSS selectors (MDN) and Pseudo-classes (MDN).